// import { filename } from "pathe/utils";

interface ImagesComposable {
  getImage: (fileName: string) => string | undefined
}

export function useImageAssets(): ImagesComposable {
  // TODO : replace the first parameter of the glob function according to your needs, I needed to import only png and jpeg from the images directory.
  const images = import.meta.glob('@img/*.(png|jpeg|jpg)', {
    eager: true,
  })

  const getImage = (fileName: string): string | undefined => {
    for (const path in images) {
      if (images[path]) {
        // 安全取值
        // unknown type is required here to change the final type as typescript thinks that images.value[path] is a function, it is not.
        const image: unknown = images[path]
        const imagePath = (image as { default: string }).default

        // if (filename(imagePath).split('.')[0] === filename(fileName)) {
        //   return imagePath;
        // }
        if (path.includes(fileName)) {
          return imagePath
        }
      }
    }
    return undefined
  }

  return { getImage }
}
